<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 题目 - 基于JS对象创建DOM树形结构
        let obj = {
            tag:"div",
            attr:{
                class:["a","b","c"],
                id:"aa"
            },
            children:[
                "内容文本",
                {
                    tag:"p",
                    attr:{
                        style:{
                            color:"red",
                            backgroundColor:"#ccc"
                        },
                        itany:"网博"
                    },
                    children:[
                        "内容文本",
                        {
                            tag:"span",
                            attr:{
                                style:{
                                    color:"#333"
                                }
                            },
                            events:{
                                click:function(){
                                    alert("提示框")
                                }
                            },
                            children:[
                                "提示信息"
                            ]
                        }
                    ]
                },
                {
                    tag:"p",
                    children:[
                        "内容文本"
                    ]
                }
            ]
        }

        /*
            1、方法自调用
            2、明确结束点(控制递归次数)
            3、参数共享递归数据
        */
        window.onload=function(){
            var body=document.body
            var DomArr=[body];
            function createDom(obj){
                for(key in obj){
                    if(key=="tag"){
                        var Dom=document.createElement(obj[key]);
                        DomArr[DomArr.length-1].appendChild(Dom);
                        DomArr.push(Dom);

                    }else if(key=="attr"){
                        for(let attr in obj[key]){      
                             if(Array.isArray(obj[key][attr])) {
                                Dom.setAttribute(attr,obj[key][attr].join(" "));
                            }else if(typeof (obj[key][attr])=="object"){
                                var str="";
                                for(var s in obj[key][attr]){
                                    str+=s+":"+obj[key][attr][s]+";"
                                }
                                Dom.setAttribute(attr,str);
                            }else{
                                Dom.setAttribute(attr,obj[key][attr]);
                            }                              
                        }
                    }else if(key=="events"){
                        for(let event in obj[key]){
                                Dom.addEventListener(event,obj[key][event]) ;  
                            }
                    }
                    else{
                        for(let c in obj[key]){
                            if(typeof (obj[key][c]) ==="string"){
                                var contentDOM=document.createTextNode(obj[key][c]);
                                DomArr[DomArr.length-1].appendChild(contentDOM);
                            }else{
                                var obj=obj[key][c]
                                createDom(obj);
                            }
                        }
                    }
                }
            }
            createDom(obj);
        }
    </script>
</head>
<body>
    
</body>
</html>